<template>
	<view class="template-job tn-safe-area-inset-bottom tn-skeleton" :style="pageStyle">

		<!-- 顶部自定义导航 -->
		<!-- <tn-nav-bar fixed :isBack="false" :bottomShadow="false" backgroundColor="unset">
			<text class="page-title">首页</text>
		</tn-nav-bar> -->

		<!-- 组合组件 -->
		<homeComb ref="homeComb" v-if="showHomeComb" :dataConfig="homeCombData" :isScrolled="isScrolled"
			:isChanged="isChanged" :gridTitleList="gridTitleList" :isShowTimelimited="isShowTimelimited"
			:noticeList="noticeList" :firstTimeActivy="firstTimeActivy" :purchaseList="purchaseList"
			@ScrollPosition="ScrollPosition"></homeComb>

		<view v-for="(item, index) in styleConfig" :key="index">
			<!-- 导航组 -->
			<menus v-if="item.name == 'menus'" :dataConfig="item"></menus>
			<!-- 瓷片区 -->
			<tileArea v-if="item.name == 'tileArea'" :dataConfig="item"></tileArea>
			<!-- 图片魔方 -->
			<pictureCube v-if="item.name == 'pictureCube'" :dataConfig="item"></pictureCube>
			<!-- 辅助空白-->
			<blank-page v-if="item.name == 'blankPage'" :dataConfig="item"></blank-page>
			<!-- 活动专区 -->
			<activtiyZone v-if="item.name == 'activtiyZone'" :dataConfig="item" @detail="goDetail"></activtiyZone>
			<!-- 限时活动 -->
			<timeActivities ref="timeActivit" v-if="item.name == 'timeActivities'" :dataConfig="item"
				@detail="goDetail"></timeActivities>
			<!-- 商品列表 -->
			<goodList v-if="item.name == 'goodList'" :dataConfig="item" @detail="goDetail"></goodList>
			<!-- 商品宫格 -->
			<productGrid ref="productGrid" v-if="item.name == 'productGrid'" :dataConfig="item" @detail="goDetail">
			</productGrid>
			<!-- 开团活动 -->
			<groupActivities v-if="item.name == 'groupActivities'" :dataConfig="item" @detail="goDetail">
			</groupActivities>
		</view>

		<tn-skeleton :show="showSkeleton"></tn-skeleton>
		<successCom ref="refSuccess"></successCom>

	</view>
</template>

<script>
	import store from '@/store/index.js'

	import successCom from '@/components/success.vue';
	import tileArea from '@/components/tileArea';
	import homeComb from '@/components/homeComb';
	import pictureCube from '@/components/pictureCube';
	import blankPage from '@/components/blankPage';
	import menus from '@/components/menus.vue';
	import activtiyZone from '@/components/activtiyZone.vue';
	import timeActivities from '@/components/time-activities.vue';
	import goodList from '@/components/goodList';
	import productGrid from '@/components/productGrid.vue';
	import groupActivities from '@/components/groupActivities.vue';
	import {
		getDiy,
		getNoticeList,
		getPurchaseList,
		getImageDomain
	} from '@/config/api.js';
	import {
		minLogin
	} from '@/js/minLogin.js'
	import {
		pagesHome
	} from '@/js/pages/home.js'
	export default {
		mixins: [minLogin, pagesHome],
		components: {
			successCom,
			tileArea,
			homeComb,
			pictureCube,
			blankPage,
			menus,
			activtiyZone,
			timeActivities,
			goodList,
			productGrid,
			groupActivities
		},
		props: {
			//是否开始滚动
			isScrolled: {
				type: Boolean,
				default: false
			},
			//是否切换吸顶菜单
			isChanged: {
				type: Boolean,
				default: false
			},
			isShowTimelimited: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				showSkeleton: true,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#F93737',
					}
				}, ],
				boxKey: 0,
				scrollHeight: 500,
				paddingTop: 60,
				emitDate: 'indexHome',
				show: false,
				time: '',
				list: [],
				options1: [{
					text: '删除',
					style: {
						backgroundColor: '#F93737'
					}
				}],
				styleConfig: [], //DIY数据
				showHomeComb: false, //是否显示组合
				noticeList: [], //公告滚动列表
				purchaseList: [], //购买信息列表
				homeCombData: {}, //组合组件数据
				pageStyle: {},
				firstTimeActivy: null, // 第一个限时组件信息
				gridTitleList: [], // 所有商品宫格信息
			}
		},
		computed: {
			countList() {
				let num = 0;
				for (let i in this.list) {
					num += this.list[i].fQty;
				}
				return num;
			}
		},
		onReady() {
			// this.getTopNumber()
		},
		mounted() {
			// setTimeout(() => {
			// this.showSkeleton = false
			// }, 1000)

			// this.$refs.refSuccess.showBox({
			// 	type:'error',//success/error/warning,
			// 	txt:'操作失败，请重试！'
			// })
			// 获取全局本地图片域名
			this.getImageDomainFn()

			// 获取diy数据
			this.diyData(0, false)
			// 获取公告轮播数据
			this.getNoticeListFn()
			// 获取购买信息列表
			this.getPurchaseListFn()

			this.scrollHeight = this.screenHeight - 282;

			setTimeout(() => {
				this.paddingTop = this.vuex_padding_top
				this.paddingTop += 5
			}, 400)


		},
		methods: {
			ScrollPosition(id) {
				this.$emit('ScrollPosition', id)
				// let scrollTop = this.gridTitleList.find(item => item.id === id).top
				// console.log('scrollTop', scrollTop);
				// setTimeout(() => {
				// 	uni.pageScrollTo({
				// 		scrollTop: scrollTop,
				// 		duration: 0
				// 	})
				// }, 50)
			},
			changeNameIndex(index) {
				if (index !== this.$refs.homeComb.nameCurrent) {
					this.$refs.homeComb.nameCurrent = index
				}
			},
			getTopNumber() {
				let that = this
				// that.$nextTick((res) => {
				// 	console.log('res' , res);
				// 	that.$refs.timeActivit.onScroll()
				// 	that.$refs.productGrid.onScroll()
				// })
				return
				const query = uni.createSelectorQuery().in(this)
				if (this.firstTimeActivy) {
					this.$nextTick(() => {
						query.select(`#${this.firstTimeActivy.id}`).boundingClientRect(res => {
							console.log('this.firstTimeActivy--res', res);
							// this.$emit('getCeilingData', res)
						}).exec()
					})
				} else {
					this.$emit('getCeilingData', {
						top: Infinity
					})
				}
				if (this.gridTitleList.length) {
					console.log('this.gridTitleList', this.gridTitleList);
					query.select(`#${this.gridTitleList[0].id}`).boundingClientRect(res => {
						// this.$emit('getCeilingChangeData', res)
					}).exec()
					this.gridTitleList.forEach(item => {
						this.$nextTick(() => {
							query.select(`#${item.id}`).boundingClientRect(
								res => {
									console.log('this.gridTitleList-res', res);
									// item.top = res.top
								}).exec()
						})
					})
					// this.$emit('gridTitleListFn', this.gridTitleList)
				} else {
					this.$emit('getCeilingChangeData', {
						top: Infinity
					})
				}

			},
			// 获取全局本地图片域名
			getImageDomainFn() {
				let that = this
				getImageDomain().then(res => {
					store.commit('SET_IMG_URL', res.data)
				}).catch(err => {})
			},
			// 获取首页购买信息列表
			getPurchaseListFn() {
				let that = this
				getPurchaseList().then(res => {
					this.purchaseList = res.data
				}).catch(err => {})
			},
			// 获取首页公告轮播列表
			getNoticeListFn() {
				let that = this
				getNoticeList('0').then(res => {
					console.log(res);
					this.noticeList = res.data.list
				}).catch(err => {
					console.log(err);
				})
			},
			/**
			 * 获取DIY
			 * @param {number} id
			 * @param {boolean} type 区分是否是微页面
			 */
			diyData(id, type) {
				let that = this;
				that.styleConfig = []
				uni.showLoading({
					title: '加载中...'
				});
				getDiy(id).then(res => {

					this.showSkeleton = false

					console.log(res);
					that.errorNetwork = false;
					let data = res.data;
					that.diyId = res.data.id;
					that.styleConfig = that.objToArr(res.data.value);
					that.pageStyle = {
						'background-color': data.isBgColor === 1 ? res.data.colorPicker : '',
						'background-image': data.isBgPic === 1 ? `url(${res.data.bgPic})` : '',
						'background-repeat': res.data.bgTabVal === 1 ? 'repeat-y' : 'no-repeat',
						'background-size': res.data.bgTabVal === 2 ? 'cover' : 'contain'
					};
					uni.hideLoading();
					that.firstTimeActivy = that.styleConfig.find(item => item.name === 'timeActivities')
					that.gridTitleList = that.styleConfig.filter(item => item.name === 'productGrid').map(item =>
						({
							id: item.id,
							name: item.titleConfig.val
						}))
					if (type) {
						that.styleConfig.forEach((item) => {
							if (item.name == 'headerSerch' || item.name == 'homeComb' || item.name ==
								'tabNav') {
								that.styleConfig.splice(index, 1);
							}
						});
					} else {
						that.styleConfig.forEach((item) => {
							if (item.name === 'tabNav') {
								that.showCateNav = true;
								that.cateNavData = item;
							}
							if (item.name === 'homeComb') {
								that.showHomeComb = true
								that.homeCombData = item;
							}
							if (item.name === 'headerSerch') {
								that.showHeaderSerch = true
								that.headerSerchCombData = item;
							}
						});
					}
					//新人礼的展示判断 -- 暂时注释
					// let newGift = that.$Cache.get('newGift') ? JSON.parse(that.$Cache.get('newGift')) : [];
					// uni.getImageInfo({
					// 	src: `${that.urlDomain}crmebimage/presets/coupon_modal_bg.png`,
					// 	success: function(image) {
					// 		that.couponModal = newGift.length ? true : false;
					// 	}
					// });
				}).catch(err => {
					console.log('getDiy_err', err);
					return that.$refs.refSuccess.showBox({
						type: 'error', //success/error/warning,
						txt: err
					})
					uni.hideLoading();
				});
			},
			// 对象转数组
			objToArr(data) {
				let obj = Object.keys(data).sort();
				let m = obj.map(key => data[key]);
				return m;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		height: auto !important;
	}
</style>